﻿<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' href='css/style.css' media='screen' />
<script src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/blocksit.min.js"></script>
<script>
$(document).ready(function() {
	//blocksit define
	$(window).load( function() {
		$('#container').BlocksIt({
			numOfCol: 5,
			offsetX: 8,
			offsetY: 8,
			blockElement: '.grid'
		});
	});	
//window resize
	var currentWidth = 1100;
	$(window).resize(function() {
		var winWidth = $(window).width();
		var conWidth;
		if(winWidth < 660) {
			conWidth = 440;
			col = 2
		} else if(winWidth < 880) {
			conWidth = 660;
			col = 3
		} else if(winWidth < 1100) {
			conWidth = 880;
			col = 4;
		} else {
			conWidth = 1100;
			col = 5;
		}
		
		if(conWidth != currentWidth) {
			currentWidth = conWidth;
			$('#container').width(conWidth);
			$('#container').BlocksIt({
				numOfCol: col,
				offsetX: 8,
				offsetY: 8
			});
		}
	});
});
</script>

</head>
<body>
<!-- Content -->
<section id="wrapper">
	<hgroup>
		<h2></h2> 
		
	</hgroup>
<div id="container">
	<div class="grid">
		<div class="imgholder">
			<img src="images/26104209d1e4e888252a164.jpg" />
		</div>
		<div class="meta">by j osborn</div>
		<strong>女版美国队长</strong>
		
		<p>暂时没有评论，你可以成为第一人</p>
		
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/2810270919a408573a1e82b.jpg" />
		</div>
		<strong>Bridge to Heaven</strong>
		<p>Where is the bridge lead to?</p>
		<div class="meta">by SigitEko</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/2519522526e7cf1b2e2d325.jpg" />
		</div>
		<strong>Autumn</strong>
		<p>The fall of the tree...</p>
		<div class="meta">by Lars van de Goor</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/260028484aceec9144c177b.png" />
		</div>
		<strong>Winter Whisper</strong>
		<p>Winter feel...</p>
		<div class="meta">by Andrea Andrade</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/26102255c3a19e52a886850.jpg" />
		</div>
		<strong>Light</strong>
		<p>The only shinning light...</p>
		<div class="meta">by Lars van de Goor</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/2610352520ee7f0fb00174d.jpg" />
		</div>
		<strong>Rooster's Ranch</strong>
		<p>Rooster's ranch landscape...</p>
		<div class="meta">by Andrea Andrade</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/261037007dee0d8dbd71f1f.jpg" />
		</div>
		<strong>Autumn Light</strong>
		<p>Sun shinning into forest...</p>
		<div class="meta">by Lars van de Goor</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/2610393378de211112f9a05.jpg" />
		</div>
		<strong>Yellow cloudy</strong>
		<p>It is yellow cloudy...</p>
		<div class="meta">by Zsolt Zsigmond</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/261043039576148411194df.jpg" />
		</div>
		<strong>Herringfleet Mill</strong>
		<p>Just a herringfleet mill...</p>
		<div class="meta">by Ian Flindt</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img2.jpg" />
		</div>
		<strong>Battle Field</strong>
		<p>Battle Field for you...</p>
		<div class="meta">by Andrea Andrade</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img24.jpg" />
		</div>
		<strong>Sundays Sunset</strong>
		<p>Beach view sunset...</p>
		<div class="meta">by Robert Strachan</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img19.jpg" />
		</div>
		<strong>Sun Flower</strong>
		<p>Good Morning Sun flower...</p>
		<div class="meta">by Zsolt Zsigmond</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img5.jpg" />
		</div>
		<strong>Beach</strong>
		<p>Something on beach...</p>
		<div class="meta">by unknown</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img25.jpg" />
		</div>
		<strong>Flowers</strong>
		<p>Hello flowers...</p>
		<div class="meta">by R A Stanley</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img20.jpg" />
		</div>
		<strong>Alone</strong>
		<p>Lonely plant...</p>
		<div class="meta">by Zsolt Zsigmond</div>
	</div> <!---->
	<div class="grid">
		<div class="imgholder">
			<img src="images/img27.jpg" />
		</div>
		<strong>Sunset Lake</strong>
		<p>A peaceful sunset view...</p>
		<div class="meta">by j osborn</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img26.jpg" />
		</div>
		<strong>Bridge to Heaven</strong>
		<p>Where is the bridge lead to?</p>
		<div class="meta">by SigitEko</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img15.jpg" />
		</div>
		<strong>Autumn</strong>
		<p>The fall of the tree...</p>
		<div class="meta">by Lars van de Goor</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img23.jpg" />
		</div>
		<strong>Winter Whisper</strong>
		<p>Winter feel...</p>
		<div class="meta">by Andrea Andrade</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img17.jpg" />
		</div>
		<strong>Light</strong>
		<p>The only shinning light...</p>
		<div class="meta">by Lars van de Goor</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img22.jpg" />
		</div>
		<strong>Rooster's Ranch</strong>
		<p>Rooster's ranch landscape...</p>
		<div class="meta">by Andrea Andrade</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img16.jpg" />
		</div>
		<strong>Autumn Light</strong>
		<p>Sun shinning into forest...</p>
		<div class="meta">by Lars van de Goor</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img21.jpg" />
		</div>
		<strong>Yellow cloudy</strong>
		<p>It is yellow cloudy...</p>
		<div class="meta">by Zsolt Zsigmond</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img28.jpg" />
		</div>
		<strong>Herringfleet Mill</strong>
		<p>Just a herringfleet mill...</p>
		<div class="meta">by Ian Flindt</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img2.jpg" />
		</div>
		<strong>Battle Field</strong>
		<p>Battle Field for you...</p>
		<div class="meta">by Andrea Andrade</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img24.jpg" />
		</div>
		<strong>Sundays Sunset</strong>
		<p>Beach view sunset...</p>
		<div class="meta">by Robert Strachan</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img19.jpg" />
		</div>
		<strong>Sun Flower</strong>
		<p>Good Morning Sun flower...</p>
		<div class="meta">by Zsolt Zsigmond</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img5.jpg" />
		</div>
		<strong>Beach</strong>
		<p>Something on beach...</p>
		<div class="meta">by unknown</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img25.jpg" />
		</div>
		<strong>Flowers</strong>
		<p>Hello flowers...</p>
		<div class="meta">by R A Stanley</div>
	</div>
	<div class="grid">
		<div class="imgholder">
			<img src="images/img20.jpg" />
		</div>
		<strong>Alone</strong>
		<p>Lonely plant...</p>
		<div class="meta">by Zsolt Zsigmond</div>
	</div> <!---->
</div>
</section>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.xmcms.net/" target="_blank">站长素材</a></p>
</div>
</body>
</html>